document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('header-canvas');
    if (!canvas) {
        console.error('Header canvas not found!');
        return;
    }
    const ctx = canvas.getContext('2d');
    const header = canvas.parentElement;

    let width, height;
    const numPoints = 100; // More points for a smoother line
    let t = 0; // Time variable for animation

    function resizeCanvas() {
        width = header.offsetWidth;
        height = header.offsetHeight;
        canvas.width = width;
        canvas.height = height;
    }

    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    function draw() {
        // Clear canvas
        ctx.clearRect(0, 0, width, height);
        
        // Semi-transparent background for a trailing effect
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, width, height);

        const step = width / (numPoints - 1);
        const dataPoints = [];

        // Generate smooth wave using multiple sine waves
        for (let i = 0; i < numPoints; i++) {
            const x = i * step;
            const y1 = Math.sin(i * 0.1 + t * 0.02) * (height / 5);
            const y2 = Math.sin(i * 0.05 + t * 0.05) * (height / 6);
            const y3 = Math.sin(i * 0.02 + t * 0.01) * (height / 8);
            dataPoints.push((height / 2) + y1 + y2 + y3);
        }

        // Draw the area chart
        ctx.beginPath();
        ctx.moveTo(0, dataPoints[0]);

        for (let i = 1; i < dataPoints.length; i++) {
            ctx.lineTo(i * step, dataPoints[i]);
        }

        // Draw the filled area
        ctx.lineTo(width, height);
        ctx.lineTo(0, height);
        ctx.closePath();
        ctx.fillStyle = 'rgba(0, 255, 0, 0.1)';
        ctx.fill();

        // Draw the top line
        ctx.beginPath();
        ctx.moveTo(0, dataPoints[0]);
        for (let i = 1; i < dataPoints.length; i++) {
            ctx.lineTo(i * step, dataPoints[i]);
        }
        ctx.strokeStyle = 'rgba(0, 255, 0, 0.6)';
        ctx.lineWidth = 1.5;
        ctx.stroke();

        t += 1; // Increment time for animation
    }

    function animate() {
        draw();
        requestAnimationFrame(animate);
    }

    animate();
});